<template>
	<div>

		<ul>
			<!-- 数组,对象,数字,字符串,map和set -->
			<li v-for="(item, index) in list" :key="index" >
			{{item.name}}
		  </li>
		</ul>


		我是h1
		<img  src="./assets/logo.png" alt="">
		
		<!-- ="表达式"  -->
		<div :id="name+'px'" :style="{width:width+'px'}"  >{{name}}  </div>
		<div :id="name+'px'" :class="{red:false}"  >{{name}}  </div>
		<div :id="name+'px'" :class="obj"  >{{name}}--obj  </div>
		<div :id="name+'px'" :class="obj"  >{{name}}--obj  </div>
		<div :id="name+'px'" :class="arr"  >{{name}}--arr  </div>
	</div>
</template>

<script setup>
import { ref,reactive } from 'vue';

// ref 将基本和对象都可以,reactive  只能是数组和对象
let name =ref("张三")
let width =ref(100)
let obj = reactive({red:false})
let arr = reactive(["red","bg"])

let list = reactive([
	{ id: 1, name: "苹果", price: 100 },
	{ id: 2, name: "苹果", price: 100 },
	// { id: 3, name: "三星", price: 1000 },
	// { id: 4, name: "小米", price: 10 }
])


setTimeout(() => {
	name.value = "李四"
	console.log(name.value);
}, 3000);

</script>

<style  scoped>
.red{
	color: red;
}
.bg{
	color: black;
	background-color: greenyellow;
}
</style>

<!-- *vue  采用mvvm的框架 -->